<template>
	<view class="container" style="padding: 24px; box-sizing: border-box;">
		<!-- 顶部栏 -->
		<view class="top-bar">
			<uni-icons type="undo-filled" size="20" class="top-left" @click="goBack">返回</uni-icons>
		</view>

		<view class="text-box-wrapper">
			<view class="text-box">
			</view>
		</view>
		
		<!-- 按钮区域 -->
		<view class="btn-area">
			<u-cell-group style="width: 92%; border-radius: 15px; overflow: hidden; background-color: white; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);">
				<u-cell
					class="cell"
					icon="order"
					icon-style="font-size: 22px; color: #71B5A0"
					title="更换下火线"
					title-style="font-size: 38rpx; font-weight: 600; color: #2c3e50;"
					isLink
					url="/pages/low/low?value=l1"
				></u-cell>
				<u-cell
					class="cell"
					icon="order"
					icon-style="font-size: 22px; color: #71B5A0"
					title="更换下火线线夹"
					title-style="font-size: 38rpx; font-weight: 600; color: #2c3e50;"
					isLink
					url="/pages/low/low?value=l2"
				></u-cell>
				<u-cell
					class="cell"
					icon="order"
					icon-style="font-size: 22px; color: #71B5A0"
					title="下火线电缆绝缘包裹"
					title-style="font-size: 38rpx; font-weight: 600; color: #2c3e50;"
					isLink
					url="/pages/low/low?value=l3"
				></u-cell>
			</u-cell-group>
		<!-- 	<button @click='toLow("l1")' class="btn-item">1.更换下火线</button>
			<button @click='toLow("l2")' class="btn-item">2.更换下火线线夹</button>
			<button @click='toLow("l3")' class="btn-item">3.下火线电缆绝缘包裹</button> -->
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			goBack() {
				uni.navigateBack();
			},
			// toLow(e) {
			// 	uni.navigateTo({
			// 		url: `/pages/low/low?value=${e}` // 使用模板字符串和查询参数
			// 	})
			// }
		}
	}
</script>

<style>
.container {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	height: 100vh;

}

.top-bar {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 60rpx;
  margin-bottom: 20rpx;
}

.top-left {
	font-size: 28rpx;
	color: black;
	padding: 0 20rpx;
	
}

.text-box-wrapper {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: 60rpx; /* 距离顶部一定的间距 */
}

.text-box {
	width: 80%; /* 控制文本框宽度 */
	display: flex;
	padding: 2%;
	justify-content: center;
	align-items: center;
	font-size: 38rpx;
	color: black;
	font-style: oblique;
	font-weight: bold;
	letter-spacing: 0.5em;
}


.btn-area {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin-top: 20%; /* 将按钮下移 */
}


.btn-item {
  margin-bottom: 60rpx;
  width: 80%;
  font-weight: 550;
  background-color: #55ff7f;
}

/* 修改u-cell-group样式 */
:deep(.u-cell-group) {
	border-radius: 15px !important;
	overflow: hidden;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
	background: white !important;
	padding: 10rpx 0;
}

/* 修改u-cell样式 */
:deep(.u-cell) {
	margin: 15rpx 0;
	background: white !important;
	transition: all 0.3s ease;
	padding: 25rpx 30rpx !important;
	height: auto !important;
}

:deep(.u-cell__title) {
	font-size: 32rpx !important;
	line-height: 1.5 !important;
}

:deep(.u-cell:not(:last-child)) {
	border-bottom: 1px solid rgba(113, 181, 160, 0.2) !important;
	margin-bottom: 8rpx;
}

:deep(.u-cell:active) {
	background: rgba(113, 181, 160, 0.08) !important;
	transform: scale(0.98);
}
</style>